<template>
  <div class="music-player" ref="rootRef">
    <!-- 背景渲染 -->
    <BackgroundRender 
      :album="currentSong?.pic || defaultAlbum" 
      :album-is-video="false" 
      ref="bgRef"
      style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"
    />

    <!-- 歌词显示 -->
    <LyricPlayer 
      v-if="showLyrics"
      :lyric-lines="lyricLines" 
      :current-time="currentTime" 
      ref="playerRef"
      @line-click="onLineClick"
      @lineClick="onLineClick"
      @touchstart="onLyricTouchStart"
      @touchend="onLyricTouchEnd"
      :class="['lyric-overlay', { 'mobile-lyrics': isMobile && showLyrics }]"
    />

    <!-- 导航菜单 -->
    <div v-if="currentView !== 'player'" class="navigation-menu">
      <div class="nav-container glass-effect">
        <h1 class="app-title">云音乐</h1>
        <!-- 版权声明 -->
        <div class="copyright-notice">
          Copyright © 2025 云音乐
        </div>
        <div class="nav-tabs">
          <button 
            @click="currentView = 'search'" 
            :class="['nav-tab', { active: currentView === 'search' }]"
          >
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="11" cy="11" r="8"/>
              <path d="m21 21-4.35-4.35"/>
            </svg>
            搜索
          </button>
          <button 
            @click="currentView = 'history'" 
            :class="['nav-tab', { active: currentView === 'history' }]"
          >
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
              <path d="M3 3v5h5"/>
            </svg>
            历史
          </button>
          <button 
            @click="currentView = 'favorites'" 
            :class="['nav-tab', { active: currentView === 'favorites' }]"
          >
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
            </svg>
            我喜欢
          </button>
        </div>
      </div>
    </div>

    <!-- 迷你播放器 -->
    <div v-if="currentSong && currentView !== 'player'" class="mini-player glass-effect" @click="goToPlayer">
      <!-- 主要内容：专辑封面、歌曲信息、控制按钮 -->
      <div class="mini-player-main">
        <img :src="currentSong.pic" :alt="currentSong.name" class="mini-album-cover" />
        <div class="mini-song-info">
          <div class="mini-song-name">{{ currentSong.name }}</div>
          <div class="mini-song-artist">{{ currentSong.artist }}</div>
        </div>
        <div class="mini-controls" @click.stop>
          <button @click="togglePlayPause" class="mini-play-btn">
            <svg v-if="!isPlaying" viewBox="0 0 24 24" fill="currentColor">
              <path d="M8 5v14l11-7z"/>
            </svg>
            <svg v-else viewBox="0 0 24 24" fill="currentColor">
              <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
            </svg>
          </button>
        </div>
      </div>
      <!-- 迷你播放器进度条 -->
      <div class="mini-progress-container" @click.stop>
        <div class="mini-progress-bar">
          <div class="mini-progress-fill" :style="{ width: progressPercentage + '%' }"></div>
        </div>
        <div class="mini-time-display">
          <span class="mini-current-time">{{ formatTime(currentTime / 1000) }}</span>
          <span class="mini-duration">{{ formatTime(duration / 1000) }}</span>
        </div>
      </div>
    </div>

    <!-- 搜索界面 -->
    <div v-if="currentView === 'search'" class="search-view">
      <div class="search-container">
        <div class="search-box">
          <div class="search-input-wrapper">
            <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="11" cy="11" r="8"/>
              <path d="m21 21-4.35-4.35"/>
            </svg>
            <input 
              v-model="searchKeyword" 
              @keyup.enter="searchSongs()"
              placeholder="搜索歌曲"
              class="search-input"
            />
            <button 
              v-if="searchKeyword || searchResults.length > 0" 
              @click="clearSearch" 
              class="clear-search-btn"
            >
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="18" y1="6" x2="6" y2="18"/>
                <line x1="6" y1="6" x2="18" y2="18"/>
              </svg>
            </button>
          </div>
        </div>

        <div v-if="searchResults.length > 0" class="search-results">
          <div class="results-header">
            <span>歌曲</span>
            <span>歌词</span>
            <span class="results-count">第 {{ searchCurrentPage }} 页</span>
          </div>
          <div 
            v-for="song in searchResults" 
            :key="song.rid"
            @click="playSong(song)"
            class="song-item"
          >
            <img :src="song.pic" :alt="song.name" class="song-cover" />
            <div class="song-info">
              <div class="song-name">{{ song.name }}</div>
              <div class="song-artist">{{ song.artist }}</div>
            </div>
            <button 
              @click.stop="toggleSongFavorite(song)" 
              class="favorite-btn"
              :class="{ 'favorite-active': isSongInFavorites(song.rid) }"
            >
              <svg viewBox="0 0 24 24" 
                :fill="isSongInFavorites(song.rid) ? 'currentColor' : 'none'" 
                stroke="currentColor" 
                stroke-width="2"
              >
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
              </svg>
            </button>
          </div>
          
          <div class="pagination">
            <button 
              @click="loadPreviousPage" 
              :disabled="searchCurrentPage <= 1"
              class="page-btn"
            >
              上一页
            </button>
            <span class="page-info">第 {{ searchCurrentPage }} 页</span>
            <button 
              @click="loadNextPage" 
              :disabled="searchResults.length < 20"
              class="page-btn"
            >
              下一页
            </button>
          </div>
        </div>

        <div v-if="isSearching" class="loading">
          <div class="loading-spinner"></div>
          <span>搜索中...</span>
        </div>
      </div>
    </div>

    <!-- 历史播放界面 -->
    <div v-if="currentView === 'history'" class="history-view">
      <div class="history-container">
        <div v-if="playHistory.length > 0">
          <button @click="clearHistory" class="clear-btn">
            清空历史
          </button>
          <div class="history-list">
          <div 
            v-for="song in playHistory" 
            :key="song.rid"
            @click="playSong(song)"
            class="song-item"
          >
            <img :src="song.pic" :alt="song.name" class="song-cover" />
            <div class="song-info">
              <div class="song-name">{{ song.name }}</div>
              <div class="song-artist">{{ song.artist }}</div>
              <div class="song-stats">
                播放 {{ song.playCount }} 次 · {{ formatTime(Date.now() - song.playTime, true) }}
              </div>
            </div>
            <button @click.stop="removeFromHistory(song.rid)" class="remove-btn">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="3,6 5,6 21,6"/>
                <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"/>
                <line x1="10" y1="11" x2="10" y2="17"/>
                <line x1="14" y1="11" x2="14" y2="17"/>
              </svg>
            </button>
          </div>
        </div>
        </div>
        
        <div v-else class="empty-state">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
            <path d="M3 3v5h5"/>
          </svg>
          <p>暂无播放历史</p>
        </div>
      </div>
    </div>

    <!-- 我喜欢的音乐界面 -->
    <div v-if="currentView === 'favorites'" class="favorites-view">
      <div class="favorites-container">
        <div v-if="favorites.length > 0">
          <div class="favorites-count">{{ favorites.length }} 首</div>
          <div class="favorites-list">
          <div 
            v-for="song in favorites" 
            :key="song.rid"
            @click="playSong(song)"
            class="song-item"
          >
            <img :src="song.pic" :alt="song.name" class="song-cover" />
            <div class="song-info">
              <div class="song-name">{{ song.name }}</div>
              <div class="song-artist">{{ song.artist }}</div>
              <div class="song-stats">
                添加于 {{ formatTime(Date.now() - song.addTime, true) }}
              </div>
            </div>
            <button @click.stop="removeFromFavorites(song.rid)" class="remove-btn">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="3,6 5,6 21,6"/>
                <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"/>
                <line x1="10" y1="11" x2="10" y2="17"/>
                <line x1="14" y1="11" x2="14" y2="17"/>
              </svg>
            </button>
          </div>
        </div>
        </div>
        
        <div v-else class="empty-state">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
          </svg>
          <p>暂无收藏的音乐</p>
        </div>
      </div>
    </div>

    <!-- 播放器界面 -->
    <div v-if="currentView === 'player'" class="player-view">
      <!-- PC端布局 -->
      <div v-if="!isMobile" class="desktop-layout">
        <!-- 左侧歌词区域 -->
        <div v-if="showLyrics" class="lyrics-section">
          <!-- 歌词在这里通过LyricPlayer组件显示 -->
        </div>

        <!-- 右侧控制区域 -->
        <div class="controls-section glass-effect" :class="{ 'controls-compact': showLyrics, 'controls-fullwidth': !showLyrics }">
          <div class="album-cover-container">
            <img 
              :src="currentSong?.pic || defaultAlbum" 
              :alt="currentSong?.name || ''"
              class="album-cover"
              @click="togglePlayPause"
            />
            <div class="play-overlay" v-if="!isPlaying">
              <svg class="play-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M8 5v14l11-7z"/>
              </svg>
            </div>
          </div>

          <div class="song-meta">
            <h2 class="song-title">{{ currentSong?.name || '未播放' }}</h2>
            <p class="song-artist">{{ currentSong?.artist || '' }}</p>
          </div>

          <div class="player-controls">
            <div class="control-buttons">
              <button @click="previousSong" class="control-btn">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
                </svg>
              </button>
              
              <button @click="togglePlayPause" class="control-btn play-btn">
                <svg v-if="!isPlaying" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M8 5v14l11-7z"/>
                </svg>
                <svg v-else viewBox="0 0 24 24" fill="currentColor">
                  <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                </svg>
              </button>
              
              <button @click="nextSong" class="control-btn">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
                </svg>
              </button>
            </div>

            <div class="progress-container">
              <span class="time-display">{{ formatTime(currentTime / 1000) }}</span>
              <div class="progress-bar-container" @click="seekTo">
                <div class="progress-bar">
                  <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
                  <div 
                    class="progress-handle" 
                    :style="{ left: progressPercentage + '%' }"
                    @mousedown="startDrag"
                    @touchstart="startDrag"
                  ></div>
                </div>
              </div>
              <span class="time-display">{{ formatTime(duration / 1000) }}</span>
            </div>

            <div class="bottom-controls">
              <button @click="togglePlayMode" class="control-btn play-mode-btn" :title="'播放模式: ' + (playMode === 'order' ? '顺序播放' : playMode === 'loop' ? '单曲循环' : '随机播放')">
                <svg :viewBox="getPlayModeIcon().viewBox" fill="currentColor">
                  <path :d="getPlayModeIcon().path"/>
                </svg>
              </button>
              
              <button @click="toggleFavorite" class="player-favorite-btn" :class="{ 'favorite-active': isSongFavorited }">
                <svg viewBox="0 0 24 24" :fill="isSongFavorited ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2">
                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                </svg>
              </button>
              
              <button @click="showComments = !showComments" class="control-btn">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                </svg>
              </button>
              
              <button @click="backToHome" class="control-btn">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M19 12H5"/>
                  <path d="M12 19l-7-7 7-7"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 移动端布局 -->
      <div v-else class="mobile-layout">
        <!-- 移动端控制区域 -->
        <div class="mobile-controls glass-effect" v-if="!showLyrics">
          <div class="mobile-header">
            <button @click="backToHome" class="back-btn">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M19 12H5"/>
                <path d="M12 19l-7-7 7-7"/>
              </svg>
            </button>
            
            <button @click="showComments = !showComments" class="comment-btn">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
              </svg>
            </button>
          </div>

          <div class="mobile-content">
            <div class="mobile-album-container">
              <img 
                :src="currentSong?.pic || defaultAlbum" 
                :alt="currentSong?.name || ''"
                class="mobile-album-cover"
                @click="togglePlayPause"
              />
              <div class="mobile-play-overlay" v-if="!isPlaying">
                <svg class="mobile-play-icon" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M8 5v14l11-7z"/>
                </svg>
              </div>
            </div>

            <div class="mobile-song-meta">
              <h2 class="mobile-song-title">{{ currentSong?.name || '未播放' }}</h2>
              <p class="mobile-song-artist">{{ currentSong?.artist || '' }}</p>
            </div>

            <div class="mobile-progress">
              <div class="mobile-progress-bar-container" @click="seekTo">
                <div class="mobile-progress-bar">
                  <div class="mobile-progress-fill" :style="{ width: progressPercentage + '%' }"></div>
                  <div 
                    class="mobile-progress-handle" 
                    :style="{ left: progressPercentage + '%' }"
                    @mousedown="startDrag"
                    @touchstart="startDrag"
                  ></div>
                </div>
              </div>
              <div class="mobile-time-display">
                <span>{{ formatTime(currentTime / 1000) }}</span>
                <span>{{ formatTime(duration / 1000) }}</span>
              </div>
            </div>

            <div class="mobile-controls-buttons">
              <button @click="previousSong" class="mobile-control-btn">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
                </svg>
              </button>
              
              <button @click="togglePlayPause" class="mobile-control-btn mobile-play-btn">
                <svg v-if="!isPlaying" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M8 5v14l11-7z"/>
                </svg>
                <svg v-else viewBox="0 0 24 24" fill="currentColor">
                  <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                </svg>
              </button>
              
              <button @click="nextSong" class="mobile-control-btn">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
                </svg>
              </button>
            </div>

            <div class="mobile-bottom-controls">
              <button @click="togglePlayMode" class="mobile-bottom-btn">
                <svg :viewBox="getPlayModeIcon().viewBox" fill="currentColor">
                  <path :d="getPlayModeIcon().path"/>
                </svg>
                <span>{{ playMode === 'order' ? '顺序' : playMode === 'loop' ? '循环' : '随机' }}</span>
              </button>
              
              <button @click="toggleFavorite" class="mobile-favorite-btn" :class="{ 'favorite-active': isSongFavorited }">
                <svg viewBox="0 0 24 24" :fill="isSongFavorited ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2">
                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                </svg>
                <span>{{ isSongFavorited ? '已收藏' : '收藏' }}</span>
              </button>
              
              <button @click="toggleLyrics" class="mobile-bottom-btn">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                  <polyline points="14,2 14,8 20,8"/>
                  <line x1="16" y1="13" x2="8" y2="13"/>
                  <line x1="16" y1="17" x2="8" y2="17"/>
                  <polyline points="10,9 9,9 8,9"/>
                </svg>
                <span>歌词</span>
              </button>
            </div>
          </div>
        </div>

        <!-- 移动端歌词界面控制栏 -->
        <div v-if="showLyrics" class="mobile-lyric-controls">
          <div class="mobile-lyric-header glass-effect">
            <button @click="backToHome" class="mobile-lyric-btn">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M19 12H5"/>
                <path d="M12 19l-7-7 7-7"/>
              </svg>
            </button>
            
            <div class="mobile-lyric-info">
              <div class="mobile-lyric-title">{{ currentSong?.name || '未播放' }}</div>
              <div class="mobile-lyric-artist">{{ currentSong?.artist || '' }}</div>
            </div>
            
            <button @click="toggleLyrics" class="mobile-lyric-btn">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="18" y1="6" x2="6" y2="18"/>
                <line x1="6" y1="6" x2="18" y2="18"/>
              </svg>
            </button>
          </div>
          
          <!-- 移动端歌词界面底部控制栏 -->
          <div class="mobile-lyric-bottom glass-effect">
            <div class="mobile-lyric-progress">
              <div class="mobile-lyric-progress-bar-container" @click="seekTo">
                <div class="mobile-lyric-progress-bar">
                  <div class="mobile-lyric-progress-fill" :style="{ width: progressPercentage + '%' }"></div>
                  <div 
                    class="mobile-lyric-progress-handle" 
                    :style="{ left: progressPercentage + '%' }"
                    @mousedown="startDrag"
                    @touchstart="startDrag"
                  ></div>
                </div>
              </div>
              <div class="mobile-lyric-time-display">
                <span>{{ formatTime(currentTime / 1000) }}</span>
                <span>{{ formatTime(duration / 1000) }}</span>
              </div>
            </div>
            
            <div class="mobile-lyric-controls-buttons">
              <button @click="togglePlayMode" class="mobile-lyric-control-btn">
                <svg :viewBox="getPlayModeIcon().viewBox" fill="currentColor">
                  <path :d="getPlayModeIcon().path"/>
                </svg>
              </button>
              
              <button @click="previousSong" class="mobile-lyric-control-btn">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
                </svg>
              </button>
              
              <button @click="togglePlayPause" class="mobile-lyric-control-btn mobile-lyric-play-btn">
                <svg v-if="!isPlaying" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M8 5v14l11-7z"/>
                </svg>
                <svg v-else viewBox="0 0 24 24" fill="currentColor">
                  <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                </svg>
              </button>
              
              <button @click="nextSong" class="mobile-lyric-control-btn">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
                </svg>
              </button>
              
              <button @click="showComments = !showComments" class="mobile-lyric-control-btn">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 评论弹窗 -->
    <div v-if="showComments" class="comments-overlay" @click="showComments = false">
      <div class="comments-container glass-effect" @click.stop>
        <div class="comments-header">
          <h3>评论 (第 {{ commentsCurrentPage }} 页)</h3>
          <button @click="showComments = false" class="close-btn">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="6" x2="6" y2="18"/>
              <line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
          </button>
        </div>
        
        <div class="comments-list" v-if="comments.length > 0">
          <div v-for="comment in comments" :key="comment.u_name + comment.msg" class="comment-item">
            <img :src="comment.u_pic" :alt="comment.u_name" class="comment-avatar" />
            <div class="comment-content">
              <div class="comment-name">{{ comment.u_name }}</div>
              <div class="comment-text">{{ comment.msg }}</div>
            </div>
          </div>
          
          <div class="comments-pagination">
            <button 
              @click="loadPreviousComments" 
              :disabled="commentsCurrentPage <= 1 || isLoadingComments"
              class="page-btn"
            >
              上一页
            </button>
            <span class="page-info">第 {{ commentsCurrentPage }} 页</span>
            <button 
              @click="loadNextComments" 
              :disabled="comments.length < commentsPageSize || isLoadingComments"
              class="page-btn"
            >
              下一页
            </button>
          </div>
        </div>
        
        <div v-else-if="isLoadingComments" class="loading">
          <div class="loading-spinner"></div>
          <span>加载评论中...</span>
        </div>
        
        <div v-else class="no-comments">
          暂无评论
        </div>
      </div>
    </div>

    <!-- 自定义弹窗提示 -->
    <div v-if="notification.show" class="notification-toast" :class="{ 'notification-show': notification.show }">
      <div class="notification-content">
        <svg v-if="notification.type === 'success'" class="notification-icon success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
        </svg>
        <svg v-else-if="notification.type === 'removed'" class="notification-icon removed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
        </svg>
        <span class="notification-text">{{ notification.message }}</span>
      </div>
    </div>

    <!-- 音频元素 -->
    <audio 
      ref="audioRef" 
      @play="onPlay" 
      @pause="onPause"
      @ended="onEnded"
      @timeupdate="onTimeUpdate"
      @loadedmetadata="onLoadedMetadata"
      preload="auto"
    />


  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, onMounted, onUnmounted, watchEffect, watch, nextTick } from "vue";
import type { LyricLine } from "@applemusic-like-lyrics/core";
import { parseTTML } from "@applemusic-like-lyrics/lyric";
import { BackgroundRender, LyricPlayer, type BackgroundRenderRef, type LyricPlayerRef } from "../index";
import { musicApi, type Song, type Comment } from "../services/musicApi";
import { playHistoryService, type PlayHistoryItem } from "../services/playHistoryService";
import { favoritesService, type FavoriteItem } from "../services/favoritesService";

// 检测是否为移动设备
const isMobile = computed(() => {
  return window.innerWidth <= 768;
});

// 默认专辑封面
const defaultAlbum = "/images/default-album.png";

// 引用
const audioRef = ref<HTMLAudioElement>();
const playerRef = ref<LyricPlayerRef>();
const bgRef = ref<BackgroundRenderRef>();
const rootRef = ref<HTMLElement>();

// 播放模式枚举
type PlayMode = 'order' | 'loop' | 'random';

// 状态管理
const state = reactive({
  currentTime: 0,
  duration: 0,
  isPlaying: false,
  volume: 1,
});

// 播放模式状态
const playMode = ref<PlayMode>('order');

// 界面状态
const currentView = ref<'search' | 'player' | 'history' | 'favorites'>('search');
const showLyrics = ref(false);
const showComments = ref(false);

// 搜索相关
const searchKeyword = ref('');
const searchResults = ref<Song[]>([]);
const isSearching = ref(false);
const searchCurrentPage = ref(1);

// 当前播放歌曲
const currentSong = ref<Song | null>(null);
const lyricLines = ref<LyricLine[]>([]);

// 历史播放和收藏
const playHistory = ref<PlayHistoryItem[]>([]);
const favorites = ref<FavoriteItem[]>([]);

// 播放列表管理
const currentPlaylist = ref<Song[]>([]);
const currentIndex = ref<number>(-1);

// 评论相关
const comments = ref<Comment[]>([]);
const isLoadingComments = ref(false);
const commentsCurrentPage = ref(1);
const commentsPageSize = ref(20);

// 进度条拖拽
const isDragging = ref(false);
const dragPercentage = ref(0);

// 通知弹窗
const notification = reactive({
  show: false,
  message: '',
  type: 'success' as 'success' | 'removed'
});

// 计算属性
const currentTime = computed(() => state.currentTime);
const isPlaying = computed(() => state.isPlaying);
const duration = computed(() => state.duration);

const progressPercentage = computed(() => {
  if (isDragging.value) {
    return dragPercentage.value;
  }
  return duration.value > 0 ? (currentTime.value / duration.value) * 100 : 0;
});

// Media Session 辅助：系统级播放控件与信息同步（macOS/iOS/Android）
const isMediaSessionSupported = typeof navigator !== 'undefined' && 'mediaSession' in navigator;

const updateMediaSessionMetadata = () => {
  if (!isMediaSessionSupported) return;
  const song = currentSong.value;
  if (!song) return;
  try {
    // 使用相同图片声明多种尺寸，提升兼容性（系统通常会择优使用）
    (navigator as any).mediaSession.metadata = new (window as any).MediaMetadata({
      title: song.name || '',
      artist: song.artist || '',
      album: '',
      artwork: [
        { src: song.pic || defaultAlbum, sizes: '96x96', type: 'image/png' },
        { src: song.pic || defaultAlbum, sizes: '128x128', type: 'image/png' },
        { src: song.pic || defaultAlbum, sizes: '192x192', type: 'image/png' },
        { src: song.pic || defaultAlbum, sizes: '256x256', type: 'image/png' },
        { src: song.pic || defaultAlbum, sizes: '512x512', type: 'image/png' },
      ]
    });
  } catch {}
};

const updateMediaSessionPositionState = () => {
  if (!isMediaSessionSupported || !audioRef.value) return;
  const audio = audioRef.value;
  try {
    if (Number.isFinite(audio.duration)) {
      (navigator as any).mediaSession.setPositionState({
        duration: isFinite(audio.duration) ? audio.duration : 0,
        playbackRate: audio.playbackRate || 1,
        position: audio.currentTime || 0,
      });
    }
  } catch {}
};

// 检查当前歌曲是否已收藏（基于hash值优先判断）
const isSongFavorited = computed(() => {
  if (!currentSong.value) return false;
  
  // 使用响应式的favorites数组进行判断，确保状态能及时更新
  const song = currentSong.value;
  
  // 优先使用hash值进行判断
  if (song.rid && song.rid.includes('-')) {
    const hash = song.rid.split('-')[1];
    return favorites.value.some(item => {
      // 直接匹配rid
      if (item.rid === song.rid) return true;
      // 从rid中提取hash进行比较
      if (item.rid.includes('-')) {
        const itemHash = item.rid.split('-')[1];
        return itemHash === hash;
      }
      // 如果item有hash字段，也进行比较
      if (item.hash && item.hash === hash) return true;
      return false;
    });
  }
  
  // 如果没有hash，则使用rid
  return favorites.value.some(item => item.rid === song.rid);
});

// 检查歌曲是否在收藏列表中（基于hash值优先判断）
const isSongInFavorites = (songRid: string): boolean => {
  // 使用响应式的favorites数组进行判断，确保状态能及时更新
  if (songRid && songRid.includes('-')) {
    const hash = songRid.split('-')[1];
    return favorites.value.some(item => {
      // 直接匹配rid
      if (item.rid === songRid) return true;
      // 从rid中提取hash进行比较
      if (item.rid.includes('-')) {
        const itemHash = item.rid.split('-')[1];
        return itemHash === hash;
      }
      // 如果item有hash字段，也进行比较
      if (item.hash && item.hash === hash) return true;
      return false;
    });
  }
  // 如果没有hash，则使用rid
  return favorites.value.some(item => item.rid === songRid);
};

// 显示通知
const showNotification = (message: string, type: 'success' | 'removed' = 'success') => {
  notification.message = message;
  notification.type = type;
  notification.show = true;
  
  // 3秒后自动隐藏
  setTimeout(() => {
    notification.show = false;
  }, 3000);
};

// 切换歌曲收藏状态（用于搜索结果中的歌曲）
const toggleSongFavorite = (song: Song) => {
  try {
    const wasAdded = favoritesService.toggleFavorite(song);
    loadFavorites(); // 更新UI中的收藏列表
    
    // 显示通知
    const message = wasAdded ? `已添加 "${song.name}" 到我喜欢` : `已从我喜欢中移除 "${song.name}"`;
    showNotification(message, wasAdded ? 'success' : 'removed');
  } catch (error) {
    console.error('收藏操作失败:', error);
    showNotification('操作失败，请重试', 'removed');
  }
};

// 搜索歌曲
const searchSongs = async (page: number = 1) => {
  if (!searchKeyword.value.trim()) return;
  
  isSearching.value = true;
  try {
    const results = await musicApi.searchSongs(searchKeyword.value.trim(), page);
    searchResults.value = results;
    searchCurrentPage.value = page;
  } catch (error) {
    console.error('搜索失败:', error);
  } finally {
    isSearching.value = false;
  }
};

// 清除搜索
const clearSearch = () => {
  searchKeyword.value = '';
  searchResults.value = [];
  searchCurrentPage.value = 1;
};

// 搜索分页
const loadPreviousPage = () => {
  if (searchCurrentPage.value > 1) {
    searchSongs(searchCurrentPage.value - 1);
  }
};

const loadNextPage = () => {
  searchSongs(searchCurrentPage.value + 1);
};

// 播放歌曲
const playSong = async (song: Song, playlist?: Song[]) => {
  // 记住来源视图
  const sourceView = currentView.value;
  
  currentSong.value = song;
  currentView.value = 'player';
  
  // 设置播放列表
  if (playlist) {
    currentPlaylist.value = playlist;
    currentIndex.value = playlist.findIndex(s => s.rid === song.rid);
  } else {
    // 如果没有提供播放列表，根据来源视图设置
    switch (sourceView) {
      case 'search':
        currentPlaylist.value = searchResults.value;
        break;
      case 'history':
        currentPlaylist.value = playHistory.value;
        break;
      case 'favorites':
        currentPlaylist.value = favorites.value;
        break;
      default:
        currentPlaylist.value = [song];
    }
    currentIndex.value = currentPlaylist.value.findIndex(s => s.rid === song.rid);
  }
  
  // 添加到播放历史
  playHistoryService.addToHistory(song);
  loadPlayHistory(); // 更新UI中的历史列表
  
  // 重置歌词
  lyricLines.value = [];
  showLyrics.value = !isMobile.value; // PC端默认显示歌词
  
  try {
    // 获取音频链接
    if (song.hash) {
      const audioUrl = await musicApi.getAudioUrl(song.hash);
      if (audioUrl && audioRef.value) {
        audioRef.value.src = audioUrl;
        audioRef.value.load();
        // 更新系统元信息
        updateMediaSessionMetadata();
        
        // 自动播放
        try {
          await audioRef.value.play();
        } catch (error) {
          console.log('自动播放失败:', error);
        }
      }
      
      // 获取歌词
      const ttmlLyric = await musicApi.getCompleteLyric(song.hash);
      if (ttmlLyric) {
        const result = parseTTML(ttmlLyric);
        if (result && result.lines) {
          // 清理歌词数据
          const cleanLines = result.lines.map((line: any) => ({
            ...line,
            words: line.words.map((word: any) => ({
              ...word,
              obscene: word.obscene ?? false
            }))
          }));
          lyricLines.value = cleanLines;
        }
      }
    }
  } catch (error) {
    console.error('播放歌曲失败:', error);
  }
};

// 播放控制
const togglePlayPause = () => {
  if (!audioRef.value) return;
  
  if (state.isPlaying) {
    audioRef.value.pause();
  } else {
    audioRef.value.play();
  }
};

const previousSong = async () => {
  if (currentPlaylist.value.length === 0) return;
  
  let prevIndex: number;
  
  switch (playMode.value) {
    case 'loop':
      // 单曲循环：重新播放当前歌曲
      if (currentSong.value && audioRef.value) {
        audioRef.value.currentTime = 0;
        try {
          await audioRef.value.play();
        } catch (error) {
          console.log('自动播放失败:', error);
        }
      }
      return;
      
    case 'random':
      // 随机播放：随机选择一首歌曲
      if (currentPlaylist.value.length === 1) {
        prevIndex = 0;
      } else {
        do {
          prevIndex = Math.floor(Math.random() * currentPlaylist.value.length);
        } while (prevIndex === currentIndex.value && currentPlaylist.value.length > 1);
      }
      break;
      
    case 'order':
    default:
      // 顺序播放：播放上一首，如果是第一首则停止
      if (currentIndex.value <= 0) return;
      prevIndex = currentIndex.value - 1;
      break;
  }
  
  const prevSong = currentPlaylist.value[prevIndex];
  if (prevSong) {
    await playSong(prevSong, currentPlaylist.value);
    // 自动播放
    if (audioRef.value) {
      try {
        await audioRef.value.play();
      } catch (error) {
        console.log('自动播放失败:', error);
      }
    }
  }
};

const nextSong = async () => {
  if (currentPlaylist.value.length === 0) return;
  
  let nextIndex: number;
  
  switch (playMode.value) {
    case 'loop':
      // 单曲循环：重新播放当前歌曲
      if (currentSong.value && audioRef.value) {
        audioRef.value.currentTime = 0;
        try {
          await audioRef.value.play();
        } catch (error) {
          console.log('自动播放失败:', error);
        }
      }
      return;
      
    case 'random':
      // 随机播放：随机选择一首歌曲
      if (currentPlaylist.value.length === 1) {
        nextIndex = 0;
      } else {
        do {
          nextIndex = Math.floor(Math.random() * currentPlaylist.value.length);
        } while (nextIndex === currentIndex.value && currentPlaylist.value.length > 1);
      }
      break;
      
    case 'order':
    default:
      // 顺序播放：播放下一首，如果是最后一首则停止
      if (currentIndex.value >= currentPlaylist.value.length - 1) return;
      nextIndex = currentIndex.value + 1;
      break;
  }
  
  const nextSongToPlay = currentPlaylist.value[nextIndex];
  if (nextSongToPlay) {
    await playSong(nextSongToPlay, currentPlaylist.value);
    // 自动播放
    if (audioRef.value) {
      try {
        await audioRef.value.play();
      } catch (error) {
        console.log('自动播放失败:', error);
      }
    }
  }
};

// 处理歌曲结束
const handleSongEnd = async () => {
  switch (playMode.value) {
    case 'loop':
      // 单曲循环：重新播放当前歌曲
      if (currentSong.value && audioRef.value) {
        audioRef.value.currentTime = 0;
        try {
          await audioRef.value.play();
        } catch (error) {
          console.log('自动播放失败:', error);
        }
      }
      break;
      
    case 'order':
      // 顺序播放：播放下一首，如果是最后一首则停止
      if (currentIndex.value < currentPlaylist.value.length - 1) {
        await nextSong();
      }
      break;
      
    case 'random':
      // 随机播放：随机选择下一首
      if (currentPlaylist.value.length > 0) {
        await nextSong();
      }
      break;
  }
};

// 切换播放模式
const togglePlayMode = () => {
  switch (playMode.value) {
    case 'order':
      playMode.value = 'loop';
      showNotification('单曲循环', 'success');
      break;
    case 'loop':
      playMode.value = 'random';
      showNotification('随机播放', 'success');
      break;
    case 'random':
      playMode.value = 'order';
      showNotification('顺序播放', 'success');
      break;
  }
};

// 获取播放模式图标
const getPlayModeIcon = () => {
  switch (playMode.value) {
    case 'order':
      return {
        viewBox: "0 0 24 24",
        path: "M7 7h10v1.79c0 .45.54.67.85.35l2.79-2.79c.2-.2.2-.51 0-.71l-2.79-2.79c-.31-.31-.85-.09-.85.36V5H6c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1s1-.45 1-1V7zm10 10H7v-1.79c0-.45-.54-.67-.85-.35l-2.79 2.79c-.2.2-.2.51 0 .71l2.79 2.79c.31.31.85.09.85-.36V19h11c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1s-1 .45-1 1v3z"
      };
    case 'loop':
      return {
        viewBox: "0 0 24 24",
        path: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z"
      };
    case 'random':
      return {
        viewBox: "0 0 24 24",
        path: "M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"
      };
    default:
      return {
        viewBox: "0 0 24 24",
        path: "M7 7h10v1.79c0 .45.54.67.85.35l2.79-2.79c.2-.2.2-.51 0-.71l-2.79-2.79c-.31-.31-.85-.09-.85.36V5H6c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1s1-.45 1-1V7zm10 10H7v-1.79c0-.45-.54-.67-.85-.35l-2.79 2.79c-.2.2-.2.51 0 .71l2.79 2.79c.31.31.85.09.85-.36V19h11c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1s-1 .45-1 1v3z"
      };
  }
};

// 切换歌词显示
const toggleLyrics = () => {
  showLyrics.value = !showLyrics.value;
};

// 返回主页（不暂停音乐）
const backToHome = () => {
  currentView.value = 'search';
  showLyrics.value = false;
};

// 进入播放器页面
const goToPlayer = () => {
  if (currentSong.value) {
    currentView.value = 'player';
    showLyrics.value = !isMobile.value;
  }
};

// 收藏/取消收藏
const toggleFavorite = () => {
  if (!currentSong.value) return;
  
  try {
    const wasAdded = favoritesService.toggleFavorite(currentSong.value);
    loadFavorites(); // 更新UI中的收藏列表
    
    // 显示通知
    const message = wasAdded ? `已添加 "${currentSong.value.name}" 到我喜欢` : `已从我喜欢中移除 "${currentSong.value.name}"`;
    showNotification(message, wasAdded ? 'success' : 'removed');
  } catch (error) {
    console.error('收藏操作失败:', error);
    showNotification('操作失败，请重试', 'removed');
  }
};

// 加载播放历史
const loadPlayHistory = () => {
  playHistory.value = playHistoryService.getPlayHistory();
};

// 加载收藏列表
const loadFavorites = () => {
  favorites.value = favoritesService.getFavorites();
};

// 从历史中删除
const removeFromHistory = (rid: string) => {
  playHistoryService.removeFromHistory(rid);
  loadPlayHistory();
};

// 从收藏中删除
const removeFromFavorites = (rid: string) => {
  favoritesService.removeFromFavorites(rid);
  loadFavorites();
};

// 清空历史
const clearHistory = () => {
  if (confirm('确定要清空播放历史吗？')) {
    playHistoryService.clearHistory();
    loadPlayHistory();
  }
};

// 获取评论
const loadComments = async (page: number = 1) => {
  if (!currentSong.value?.hash) return;
  
  isLoadingComments.value = true;
  try {
    const commentList = await musicApi.getComments(currentSong.value.hash, page, commentsPageSize.value);
    comments.value = commentList;
    commentsCurrentPage.value = page;
  } catch (error) {
    console.error('加载评论失败:', error);
  } finally {
    isLoadingComments.value = false;
  }
};

// 评论分页
const loadPreviousComments = () => {
  if (commentsCurrentPage.value > 1) {
    loadComments(commentsCurrentPage.value - 1);
  }
};

const loadNextComments = () => {
  loadComments(commentsCurrentPage.value + 1);
};

// 监听评论弹窗显示
watchEffect(() => {
  if (showComments.value && currentSong.value) {
    commentsCurrentPage.value = 1;
    loadComments(1);
  }
});

// 进度条拖拽
const startDrag = (e: MouseEvent | TouchEvent) => {
  e.preventDefault();
  e.stopPropagation();
  isDragging.value = true;
  
  // 找到最近的进度条容器
  const findProgressContainer = (element: HTMLElement): HTMLElement | null => {
    let current = element;
    while (current && current !== document.body) {
      if (current.classList.contains('progress-bar-container') || 
          current.classList.contains('mobile-progress-bar-container') ||
          current.classList.contains('mobile-lyric-progress-bar-container')) {
        return current;
      }
      current = current.parentElement as HTMLElement;
    }
    return null;
  };
  
  const progressContainer = findProgressContainer(e.target as HTMLElement);
  if (!progressContainer) return;
  
  const handleMove = (e: MouseEvent | TouchEvent) => {
    if (!isDragging.value) return;
    e.preventDefault();
    
    const rect = progressContainer.getBoundingClientRect();
    const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
    const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
    dragPercentage.value = (x / rect.width) * 100;
  };
  
  const handleEnd = (e: MouseEvent | TouchEvent) => {
    e.preventDefault();
    if (isDragging.value && audioRef.value && duration.value > 0) {
      const seekTime = (dragPercentage.value / 100) * duration.value;
      audioRef.value.currentTime = seekTime / 1000;
    }
    isDragging.value = false;
    document.removeEventListener('mousemove', handleMove);
    document.removeEventListener('mouseup', handleEnd);
    document.removeEventListener('touchmove', handleMove);
    document.removeEventListener('touchend', handleEnd);
  };
  
  document.addEventListener('mousemove', handleMove);
  document.addEventListener('mouseup', handleEnd);
  document.addEventListener('touchmove', handleMove, { passive: false });
  document.addEventListener('touchend', handleEnd);
};

// 点击进度条跳转
const seekTo = (e: MouseEvent) => {
  if (isDragging.value || !audioRef.value || duration.value === 0) return;
  
  const progressContainer = e.currentTarget as HTMLElement;
  const rect = progressContainer.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const percentage = Math.max(0, Math.min(x / rect.width, 1));
  
  audioRef.value.currentTime = (percentage * duration.value) / 1000;
};

// 音频事件处理
const onPlay = () => {
  state.isPlaying = true;
  // 同步系统播放状态
  if (isMediaSessionSupported) {
    try { (navigator as any).mediaSession.playbackState = 'playing'; } catch {}
  }
  updateMediaSessionPositionState();
};

const onPause = () => {
  state.isPlaying = false;
  if (isMediaSessionSupported) {
    try { (navigator as any).mediaSession.playbackState = 'paused'; } catch {}
  }
  updateMediaSessionPositionState();
};

const onEnded = async () => {
  state.isPlaying = false;
  if (isMediaSessionSupported) {
    try { (navigator as any).mediaSession.playbackState = 'none'; } catch {}
  }
  
  // 根据播放模式处理歌曲结束
  await handleSongEnd();
};

const onTimeUpdate = () => {
  if (!isDragging.value && audioRef.value) {
    state.currentTime = (audioRef.value.currentTime * 1000) | 0;
  }
  updateMediaSessionPositionState();
};

const onLoadedMetadata = () => {
  if (audioRef.value) {
    state.duration = (audioRef.value.duration * 1000) | 0;
  }
  updateMediaSessionPositionState();
};

// 歌词行点击（兼容移动端可能的事件结构差异）
const onLineClick = (e: any) => {
  try {
    // 常规：自定义事件直接携带 line 对象包装器
    let line = e?.line?.getLine?.() ?? e?.line;
    // 兼容：部分环境可能通过 detail 传递
    if (!line && e?.detail) {
      line = e.detail?.line?.getLine?.() ?? e.detail?.line;
    }
    // 兼容：直接就是歌词行对象
    const startTimeMs = line?.startTime ?? line?.startTimeMs ?? null;
    if (startTimeMs != null && audioRef.value) {
      audioRef.value.currentTime = Number(startTimeMs) / 1000;
    }
  } catch (_) {
    /* no-op */
  }
};

// 移动端：将轻触转换为 click，触发歌词行点击逻辑
const lastLyricTouch = ref<{ x: number; y: number; time: number } | null>(null);
const onLyricTouchStart = (e: TouchEvent) => {
  if (!isMobile.value) return;
  if (e.touches.length !== 1) return;
  const t = e.touches[0];
  lastLyricTouch.value = { x: t.clientX, y: t.clientY, time: Date.now() };
};

const onLyricTouchEnd = (e: TouchEvent) => {
  if (!isMobile.value) return;
  if (!lastLyricTouch.value || e.changedTouches.length === 0) return;

  const start = lastLyricTouch.value;
  const t = e.changedTouches[0];
  const dx = t.clientX - start.x;
  const dy = t.clientY - start.y;
  const dist = Math.hypot(dx, dy);
  const elapsed = Date.now() - start.time;

  // 认为是“点按”，而非滚动/拖拽
  if (dist < 10 && elapsed < 400) {
    e.preventDefault();
    const el = document.elementFromPoint(t.clientX, t.clientY) as HTMLElement | null;
    if (el) {
      el.dispatchEvent(
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true,
          clientX: t.clientX,
          clientY: t.clientY,
        })
      );
    }
  }
  lastLyricTouch.value = null;
};

// 时间格式化
const formatTime = (seconds: number, isRelative: boolean = false): string => {
  if (isNaN(seconds) || seconds < 0) return isRelative ? '刚刚' : '0:00';
  
  if (isRelative) {
    // 转换为毫秒
    const ms = seconds;
    const secondsVal = Math.floor(ms / 1000);
    const minutes = Math.floor(secondsVal / 60);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);
    
    if (days > 0) {
      return `${days}天前`;
    } else if (hours > 0) {
      return `${hours}小时前`;
    } else if (minutes > 0) {
      return `${minutes}分钟前`;
    } else {
      return '刚刚';
    }
  } else {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  }
};

// 响应式处理
const handleResize = () => {
  // 在PC端切换到移动端时，如果正在显示歌词则切换到控制界面
  if (isMobile.value && showLyrics.value) {
    showLyrics.value = false;
  }
  // 在移动端切换到PC端时，默认显示歌词
  if (!isMobile.value && currentView.value === 'player') {
    showLyrics.value = true;
  }
  updateLayoutVars();
};

// 计算并设置动态布局变量
const updateLayoutVars = () => {
  const navEl = document.querySelector('.navigation-menu') as HTMLElement | null;
  const miniEl = document.querySelector('.mini-player') as HTMLElement | null;
  const topOffset = navEl ? (navEl.offsetTop + navEl.offsetHeight + 10) : 10;
  const bottomSafe = miniEl ? (miniEl.offsetHeight + 24) : 24; // 预留与迷你播放器的间距
  if (rootRef.value) {
    rootRef.value.style.setProperty('--search-offset-top', `${topOffset}px`);
    rootRef.value.style.setProperty('--search-bottom-safe', `${bottomSafe}px`);
  }
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
  nextTick(() => updateLayoutVars());
  // 加载本地数据
  loadPlayHistory();
  loadFavorites();
  // 绑定系统媒体按键
  if (isMediaSessionSupported) {
    try {
      (navigator as any).mediaSession.setActionHandler('play', async () => {
        if (!audioRef.value) return;
        try { await audioRef.value.play(); } catch {}
      });
      (navigator as any).mediaSession.setActionHandler('pause', () => {
        if (!audioRef.value) return;
        audioRef.value.pause();
      });
      (navigator as any).mediaSession.setActionHandler('stop', () => {
        if (!audioRef.value) return;
        audioRef.value.pause();
        audioRef.value.currentTime = 0;
      });
      (navigator as any).mediaSession.setActionHandler('previoustrack', () => previousSong());
      (navigator as any).mediaSession.setActionHandler('nexttrack', () => nextSong());
      (navigator as any).mediaSession.setActionHandler('seekto', (details: any) => {
        if (!audioRef.value) return;
        if (details?.seekTime != null) {
          audioRef.value.currentTime = details.seekTime;
          updateMediaSessionPositionState();
        }
      });
    } catch {}
  }
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

// 当迷你播放器显隐或视图切换时更新布局变量（影响预留底部空间和顶部对齐）
watch([currentSong, currentView], () => nextTick(() => updateLayoutVars()));
</script>

<style scoped>
/* 全局样式 */
.music-player {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 玻璃效果 */
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 歌词覆盖层 */
.lyric-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: plus-lighter;
  font-size: max(max(3vh, 2.5vw), 12px);
  font-weight: bold;
  touch-action: manipulation;
  pointer-events: auto;
  z-index: 2;
}

.mobile-lyrics {
  /* 提高歌词层级，避免被移动端覆盖容器拦截触摸事件 */
  z-index: 14;
  background: rgba(0, 0, 0, 0.3);
}

/* 导航菜单 */
.navigation-menu {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 90%;
  max-width: 600px; /* 修改为600px */
}

.nav-container {
  padding: 20px;
  text-align: center;
}

.app-title {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.nav-tabs {
  display: flex;
  gap: 12px;
  justify-content: center;
  max-width: 600px; /* 修改为600px，与容器保持一致 */
  margin: 0 auto; /* 居中对齐 */
}

.nav-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  /* 文字样式与app-title保持一致 */
  color: white;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  /* iOS文字渲染优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nav-tab:hover {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  color: white;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

.nav-tab.active {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  color: white;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Safari回退方案 - 当backdrop-filter不支持时使用深色背景 */
@supports not (backdrop-filter: blur(20px)) {
  .nav-tab {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .nav-tab:hover {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
  }
  
  .nav-tab.active {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
}

.nav-tab svg {
  width: 16px;
  height: 16px;
  /* iOS Safari 回退 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* 迷你播放器 */
.mini-player {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: calc(100% - 40px);
  max-width: 400px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.mini-player:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.mini-player-main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.mini-album-cover {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.mini-song-info {
  flex: 1;
  min-width: 0;
}

.mini-song-name {
  font-size: 14px;
  font-weight: 600;
  color: white;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-song-artist {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-controls {
  flex-shrink: 0;
}

.mini-play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* 对齐 favorite-btn 风格 */
  background: rgba(255, 255, 255, 0.1);
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
}

.mini-play-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  transform: scale(1.05);
}

.mini-play-btn svg {
  width: 18px;
  height: 18px;
  color: inherit;
  /* 与玻璃效果风格一致的图标处理 */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
  -webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

/* 迷你播放器进度条 */
.mini-progress-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mini-progress-bar {
  position: relative;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1.5px;
  overflow: hidden;
}

.mini-progress-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 1.5px;
  transition: width 0.1s ease;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.mini-time-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.mini-current-time,
.mini-duration {
  min-width: 32px;
  text-align: center;
}

/* 搜索界面 */
.search-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 5;
  padding: 0; /* 移除padding，让search-container直接控制定位 */
  overflow-y: auto;
}

.search-container {
  width: 90%; /* 与navigation-menu保持一致 */
  max-width: 600px; /* 修改为600px，与navigation-menu保持一致 */
  padding: 32px;
  padding-top: var(--search-offset-top, 140px); /* 与导航Tab底部相距10px */
  padding-bottom: var(--search-bottom-safe, 120px); /* 预留底部空白，避免被迷你播放器遮挡 */
  color: white;
  box-sizing: border-box;
  margin: 0 auto; /* 水平居中对齐 */
}

.search-box {
  position: relative;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 16px;
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.6);
  z-index: 1;
}

.search-input {
  width: 100%;
  padding: 16px 16px 16px 48px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: white;
  font-size: 16px;
  outline: none;
  transition: all 0.3s ease;
}

.search-input:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* 搜索结果 */
.search-results {
  margin-top: 24px;
  max-height: none;
  overflow: visible;
}

.results-header {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
  opacity: 0.8;
}

.song-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.song-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.song-cover {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 16px;
}

.song-info {
  flex: 1;
}

.song-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.song-artist {
  opacity: 0.7;
  font-size: 14px;
}

/* 搜索结果中的收藏按钮 */
.favorite-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.favorite-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.favorite-btn.favorite-active {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.favorite-btn.favorite-active:hover {
  background: rgba(255, 255, 255, 0.4);
  color: white;
}

.favorite-btn svg {
  width: 18px;
  height: 18px;
}

/* PC端播放器布局 */
.desktop-layout {
  display: flex;
  height: 100%;
}

.lyrics-section {
  flex: 1;
  position: relative;
}

.controls-section {
  width: 400px;
  margin: 20px;
  padding: 32px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 5;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* PC端紧凑模式（显示歌词时） */
.controls-section.controls-compact {
  width: 320px;
  padding: 20px;
  margin-right: 20px;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  max-height: calc(100vh - 40px);
  max-width: 320px;
  overflow-y: auto;
  animation: slideInFromRight 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* 确保在所有情况下都能正确居中 */
  margin-top: 0;
  margin-bottom: 0;
  /* 处理内容过多时的滚动 */
  display: flex;
  flex-direction: column;
  /* 防止内容溢出导致位置偏移 */
  box-sizing: border-box;
}

/* PC端全宽模式（隐藏歌词时） */
.controls-section.controls-fullwidth {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* 紧凑模式下的子元素调整 */
.controls-section.controls-compact .album-cover-container {
  margin-bottom: 20px;
  flex-shrink: 0;
  /* 确保专辑封面在紧凑模式下完整显示 */
  width: 100%;
  max-width: 280px; /* 320px - 40px padding */
}

.controls-section.controls-compact .song-meta {
  margin-bottom: 20px;
  flex-shrink: 0;
}

.controls-section.controls-compact .player-controls {
  flex-shrink: 0;
}

.controls-section.controls-compact .song-title {
  font-size: 18px;
  margin-bottom: 4px;
}

.controls-section.controls-compact .song-artist {
  font-size: 14px;
}

.controls-section.controls-compact .control-btn {
  width: 40px;
  height: 40px;
}

.controls-section.controls-compact .control-btn svg {
  width: 20px;
  height: 20px;
}

.controls-section.controls-compact .play-btn {
  width: 50px;
  height: 50px;
}

.controls-section.controls-compact .play-btn svg {
  width: 25px;
  height: 25px;
}

/* 紧凑模式下的专辑封面尺寸 */
.controls-section.controls-compact .album-cover {
  width: 100%;
  max-width: 280px;
  height: auto;
  aspect-ratio: 1;
}

.controls-section.controls-compact .time-display {
  font-size: 12px;
}

.controls-section.controls-compact .play-overlay {
  width: 50px;
  height: 50px;
}

.controls-section.controls-compact .play-icon {
  width: 25px;
  height: 25px;
}

.album-cover-container {
  position: relative;
  margin-bottom: 32px;
  cursor: pointer;
}

.album-cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  object-fit: cover;
  transition: all 0.3s ease;
}

.album-cover:hover {
  transform: scale(1.02);
}

.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.play-icon {
  width: 40px;
  height: 40px;
  color: #333;
  margin-left: 4px;
}

.song-meta {
  text-align: center;
  margin-bottom: 32px;
}

.song-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.song-artist {
  opacity: 0.8;
  font-size: 16px;
}

/* 播放控制 */
.player-controls {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.control-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.control-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: white;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
}

.control-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor; /* 让图标继承按钮颜色 */
}

.play-btn {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.play-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.15);
  box-shadow: 0 6px 30px rgba(255, 255, 255, 0.2);
}

.play-btn svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

/* 播放模式按钮样式 */
.play-mode-btn {
  position: relative;
}

.play-mode-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
}

/* 进度条 */
.progress-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.time-display {
  font-size: 14px;
  opacity: 0.8;
  min-width: 40px;
}

.progress-bar-container {
  flex: 1;
  height: 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  transition: width 0.1s ease;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: white;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-handle:hover,
.progress-handle:active {
  transform: translate(-50%, -50%) scale(1.2);
  cursor: grabbing;
}

.bottom-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* 移动端布局 */
.mobile-layout {
  position: relative;
  height: 100%;
}

.mobile-controls {
  position: fixed;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw - 40px);
  max-width: 400px;
  padding: 20px;
  color: white;
  z-index: 5;
  box-sizing: border-box;
}

.mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.back-btn,
.comment-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-btn svg,
.comment-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.mobile-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.mobile-album-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.mobile-album-cover {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  cursor: pointer;
}

.mobile-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-play-icon {
  width: 30px;
  height: 30px;
  color: #333;
  margin-left: 2px;
}

.mobile-song-meta {
  text-align: center;
  width: 100%;
}

.mobile-song-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.mobile-song-artist {
  opacity: 0.8;
  font-size: 14px;
}

/* 移动端进度条 */
.mobile-progress {
  width: 100%;
}

.mobile-progress-bar-container {
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 8px;
}

.mobile-progress-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-progress-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  transition: width 0.1s ease;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.mobile-progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: white;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-time-display {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  opacity: 0.8;
}

/* 移动端控制按钮 */
.mobile-controls-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.mobile-control-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-control-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
}

.mobile-control-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.mobile-play-btn {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.mobile-play-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.15);
  box-shadow: 0 6px 30px rgba(255, 255, 255, 0.2);
}

.mobile-play-btn svg {
  width: 30px;
  height: 30px;
}

.mobile-bottom-controls {
  display: flex;
  justify-content: center;
  gap: 32px;
}

.mobile-bottom-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.8;
}

.mobile-bottom-btn svg {
  width: 20px;
  height: 20px;
}

.mobile-bottom-btn span {
  font-size: 12px;
}

/* 移动端歌词界面控制 */
.mobile-lyric-controls {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.mobile-lyric-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 16;
  pointer-events: auto;
  backdrop-filter: blur(20px);
  background: rgba(0, 0, 0, 0.3);
}

.mobile-lyric-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.mobile-lyric-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.mobile-lyric-btn svg {
  width: 20px;
  height: 20px;
}

.mobile-lyric-info {
  flex: 1;
  text-align: center;
  margin: 0 16px;
  color: white;
}

.mobile-lyric-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-lyric-artist {
  font-size: 12px;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 移动端歌词界面底部控制栏 */
.mobile-lyric-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  z-index: 16;
  pointer-events: auto;
  backdrop-filter: blur(20px);
  background: rgba(0, 0, 0, 0.3);
}

.mobile-lyric-progress {
  margin-bottom: 20px;
}

.mobile-lyric-progress-bar-container {
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 8px;
}

.mobile-lyric-progress-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-lyric-progress-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  transition: width 0.1s ease;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.mobile-lyric-progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: white;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-lyric-time-display {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: white;
  opacity: 0.8;
}

.mobile-lyric-controls-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.mobile-lyric-control-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.mobile-lyric-control-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
}

.mobile-lyric-control-btn svg {
  width: 24px;
  height: 24px;
}

.mobile-lyric-play-btn {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.mobile-lyric-play-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.15);
  box-shadow: 0 6px 30px rgba(255, 255, 255, 0.2);
}

.mobile-lyric-play-btn svg {
  width: 30px;
  height: 30px;
}

/* 评论弹窗 */
.comments-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.comments-container {
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  color: white;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comments-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn svg {
  width: 20px;
  height: 20px;
}

.comments-list {
  flex: 1;
  overflow-y: auto;
  max-height: 400px;
}

.comment-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
}

.comment-content {
  flex: 1;
}

.comment-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  opacity: 0.9;
}

.comment-text {
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.8;
}

.no-comments {
  text-align: center;
  opacity: 0.6;
  padding: 40px 0;
}

/* 加载动画 */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  color: white;
  opacity: 0.8;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 滚动条样式 */
.search-results::-webkit-scrollbar,
.comments-list::-webkit-scrollbar {
  width: 6px;
}

.search-results::-webkit-scrollbar-track,
.comments-list::-webkit-scrollbar-track {
  background: transparent;
}

.search-results::-webkit-scrollbar-thumb,
.comments-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* 响应式设计 */
/* PC端优化：确保搜索页面顶部和底部都不被遮挡 */
@media (min-width: 769px) {
  .search-container {
    padding-top: var(--search-offset-top, 200px);
    padding-bottom: var(--search-bottom-safe, 120px);
    min-height: auto;
    box-sizing: border-box;
  }
  
  .search-results {
    max-height: none;
    margin-bottom: 0;
  }
  
  /* 确保搜索页面有合适的滚动区域 */
  .search-view {
    overflow-y: auto;
    padding-bottom: 0; /* 移除search-view的底部padding，由search-container控制 */
  }
  
  /* PC端历史和收藏界面优化 */
  .history-view, .favorites-view {
    padding-top: 200px; /* 与搜索界面保持一致的padding-top */
    padding-bottom: 120px; /* 为底部迷你播放器留出空间 */
  }
}

@media (max-width: 768px) {
  .search-view {
    padding: 0; /* 移除padding，与桌面端保持一致 */
    box-sizing: border-box;
    align-items: flex-start; /* 避免在矮屏被垂直居中后被遮挡 */
    justify-content: flex-start; /* 避免在矮屏被垂直居中后被遮挡 */
    overflow-y: auto; /* 小屏允许滚动，防止内容被遮挡 */
    min-height: 100dvh; /* 使用动态视口高度，适配移动端地址栏 */
  }
  
  .search-container {
    padding: 15px;
    padding-top: var(--search-offset-top, 120px); /* 与导航Tab底部相距10px */
    margin: 0 auto; /* 保持水平居中对齐 */
    max-width: none; /* 与navigation-menu保持一致 */
    width: calc(100% - 20px); /* 与navigation-menu保持一致 */
  }

  /* 移动端搜索结果高度自适应，避免被顶部和底部遮挡 */
  .search-results {
    max-height: none; /* 交由页面滚动 */
  }
  
  .app-title {
    font-size: 24px;
  }
  
  .song-cover {
    width: 40px;
    height: 40px;
  }
  
  .song-item {
    padding: 8px 12px;
  }
  
  .comments-overlay {
    padding: 10px;
    box-sizing: border-box;
  }
  
  .comments-container {
    padding: 15px;
    margin: 0;
    max-width: calc(100vw - 20px);
    width: calc(100vw - 20px);
  }
  
  .mobile-lyric-header,
  .mobile-lyric-bottom {
    padding: 15px;
  }
  
  .mobile-lyric-info {
    margin: 0 10px;
  }
  
  .mobile-controls {
    width: calc(100vw - 20px);
    padding: 15px;
    top: 50vh;
  }
  
  .mobile-album-container {
    width: 180px;
    height: 180px;
  }
}

/* 更小屏幕适配 */
@media (max-width: 480px) {
  .search-container {
    padding: 10px;
    padding-top: var(--search-offset-top, 180px); /* 与导航Tab底部相距10px */
    margin: 0 auto; /* 保持水平居中对齐 */
    width: calc(100% - 20px); /* 与navigation-menu保持一致 */
    max-width: none; /* 与navigation-menu保持一致 */
    margin-bottom: 120px;
  }
  
  .comments-container {
    padding: 10px;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }
  
  .mobile-controls {
    width: calc(100vw - 20px);
    padding: 10px;
    top: 50vh;
  }
  
  .mobile-album-container {
    width: 160px;
    height: 160px;
  }
  
  .app-title {
    font-size: 20px;
  }
}

/* 动画效果 */
.search-view,
.player-view {
  animation: fadeInElastic 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes fadeInElastic {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 擦除式动画 */
.mobile-lyrics {
  animation: slideUpElastic 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideUpElastic {
  0% {
    opacity: 0;
    transform: translateY(100%) scale(0.95);
  }
  60% {
    opacity: 0.9;
    transform: translateY(-10px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.mobile-controls {
  animation: bounceInCenter 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bounceInCenter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* PC端从右侧淡入动画 */
@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* 历史播放界面 */
.history-view, .favorites-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  padding: 20px;
  padding-top: 200px; /* 增加padding-top以适应版权声明 */
  padding-bottom: 124px; /* 为底部迷你播放器留出空间 */
  overflow-y: auto;
  box-sizing: border-box;
}

.history-container, .favorites-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  color: white;
}



.clear-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 16px;
  display: block;
  width: fit-content;
  align-self: flex-start; /* 防止被拉伸，保持左对齐 */
}

.clear-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
  transform: scale(1.05);
}

.favorites-count {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 16px;
  display: inline-block;
  align-self: flex-start; /* 防止被拉伸，保持左对齐 */
}

.history-list, .favorites-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%; /* 确保与容器宽度一致 */
  box-sizing: border-box;
}

.history-list .song-item, .favorites-list .song-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  width: 100%; /* 确保填满容器宽度 */
  box-sizing: border-box; /* 包含padding和border在内的总宽度 */
}

.history-list .song-item:hover, .favorites-list .song-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.history-list .song-cover, .favorites-list .song-cover {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.history-list .song-info, .favorites-list .song-info {
  flex: 1;
  min-width: 0;
}

.history-list .song-name, .favorites-list .song-name {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-list .song-artist, .favorites-list .song-artist {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-stats {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  opacity: 1;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.song-item:hover .remove-btn {
  opacity: 1;
}

.remove-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
}

.remove-btn svg {
  width: 12px;
  height: 12px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.empty-state svg {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.4);
}

.empty-state p {
  margin: 0;
  font-size: 16px;
}

/* 播放器收藏按钮样式 */
.player-favorite-btn {
  background: none;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-favorite-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  transform: scale(1.1);
}

.player-favorite-btn.favorite-active {
  color: rgba(255, 255, 255, 0.95);
}

.player-favorite-btn svg {
  width: 24px;
  height: 24px;
}

/* 移动端收藏按钮样式 */
.mobile-favorite-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.8;
}

.mobile-favorite-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  opacity: 1;
}

.mobile-favorite-btn.favorite-active {
  color: rgba(255, 255, 255, 0.95);
  opacity: 1;
}

.mobile-favorite-btn svg {
  width: 20px;
  height: 20px;
}

.mobile-favorite-btn span {
  font-size: 12px;
}

/* 收藏按钮活跃状态 - 保留原有的通用样式作为备用 */
.favorite-active {
  color: rgba(255, 255, 255, 0.95) !important;
}

.mobile-bottom-btn.favorite-active {
  color: rgba(255, 255, 255, 0.95);
}

/* PC端历史和收藏列表居中 */
.history-container, .favorites-container {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* 让子元素拉伸填满宽度 */
}

.history-list, .favorites-list {
  width: 100%;
  /* 移除max-width限制，让列表填满整个容器 */
}

/* iOS Safari 特殊优化 */
/* 移除复杂的iOS Safari专门处理，使用统一的glass-effect样式 */

/* 移动端优化 */
@media (max-width: 768px) {
  .navigation-menu {
    width: calc(100% - 20px);
    max-width: none;
  }
  
  .nav-tabs {
    gap: 8px;
    flex-wrap: wrap;
    max-width: calc(100% - 20px); /* 与navigation-menu保持一致 */
    margin: 0 auto; /* 居中对齐 */
  }
  
  .nav-tab {
    padding: 10px 16px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    color: white;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    -webkit-font-smoothing: antialiased;
  }
  
  .nav-tab svg {
    width: 14px;
    height: 14px;
    /* 移动端iOS兼容性 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  .history-view, .favorites-view {
    padding: 10px;
    padding-top: 200px; /* 与PC端保持一致，适应版权声明 */
    padding-bottom: 124px; /* 为底部迷你播放器留出空间 */
  }
  
  .history-container, .favorites-container {
    padding: 0 10px;
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
  }
  
  .history-list .song-item, .favorites-list .song-item {
    padding: 12px;
    gap: 12px;
  }
  
  .history-list .song-cover, .favorites-list .song-cover {
    width: 48px;
    height: 48px;
  }
  
  .mini-player {
    width: calc(100vw - 40px);
    max-width: 400px;
    padding: 10px 12px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
  
  .mini-album-cover {
    width: 40px;
    height: 40px;
  }
  
  .mini-play-btn {
    width: 36px;
    height: 36px;
    /* 移动端与 favorite-btn 对齐 */
    background: rgba(255, 255, 255, 0.1);
    border: none;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.8);
  }

  .mini-play-btn svg {
    width: 16px;
    height: 16px;
    color: inherit;
    /* 移动端与玻璃效果风格一致 */
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
    -webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
  }
  
  .mini-time-display {
    font-size: 9px;
  }
  
  .mini-current-time,
  .mini-duration {
    min-width: 28px;
  }
  
  /* 移动端：放大历史/收藏删除按钮的可点击区域与图标尺寸 */
  .remove-btn {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }
  
  .remove-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
  }
}

/* 小屏手机进一步增大点击区域 */
@media (max-width: 480px) {
  .remove-btn {
    width: 40px;
    height: 40px;
  }
  
  .remove-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* 搜索清除按钮 */
.clear-search-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear-search-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.clear-search-btn svg {
  width: 16px;
  height: 16px;
}

/* 分页样式 */
.pagination, .comments-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.page-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.results-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* 评论分页特殊样式 */
.comments-pagination {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 16px;
  padding-top: 16px;
}

/* 响应式分页 */
@media (max-width: 768px) {
  .pagination, .comments-pagination {
    gap: 12px;
    margin-top: 16px;
  }
  
  .page-btn {
    padding: 6px 12px;
    font-size: 13px;
  }
  
  .page-info {
    font-size: 13px;
  }
}

/* 通知弹窗样式 */
.notification-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 16px 24px;
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 90vw;
  width: auto;
  white-space: nowrap;
}

.notification-toast.notification-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
}

.notification-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.notification-icon.success {
  color: rgba(255, 255, 255, 0.9);
}

.notification-icon.removed {
  color: rgba(255, 255, 255, 0.7);
}

.notification-text {
  font-size: 14px;
  font-weight: 500;
}

/* 移动端通知弹窗适配 */
@media (max-width: 768px) {
  .notification-toast {
    top: 60px;
    max-width: 95vw;
    padding: 12px 20px;
  }
  
  .notification-text {
    font-size: 13px;
  }
  
  .notification-icon {
    width: 18px;
    height: 18px;
  }
}

/* 版权声明样式 */
.copyright-notice {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  font-size: 11px;
  font-weight: 300;
  text-align: center;
  margin-top: 4px;
  margin-bottom: 16px;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .copyright-notice {
    font-size: 10px;
    margin-top: 2px;
    margin-bottom: 12px;
  }
}
</style>